<template>
  <div class="box">
    <p>
      <van-button type="default" class="btn" to="/register">注册</van-button>
      <van-button type="default" class="btn">登录</van-button>
    </p>

    <van-cell-group>
      <van-field
        id="mes"
        v-model="message"
        type="textarea"
        placeholder="手机号/邮箱"
        rows="1"
        autosize
        ref="ipt1"
      />

      <van-field id="pass" v-model="password" type="password" ref="ipt2" placeholder="请输入密码"/>
    </van-cell-group>
    <van-button type="primary" size="large" class="btn-l" @click="top()">登录</van-button>
    <p class="tes" @click="tof()">忘记密码</p>
    <router-view></router-view>
  </div>
</template>

<script>
  import qs from "Qs";
  import axios from "axios";

  export default {
  name: "Login",
  data() {
    return {
      message: "",
      username: "",
      password: ""
    };
  },
  methods: {
    tof() {
      this.$router.push("/forget");
    },
    top() {
      console.log(12);
      var _this = this;
      axios({
        method: "post",
        url: "http://10.8.158.3:8080/sportapp/login.do",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },

        data: qs.stringify({
          username: _this.$refs.ipt1.value,
          password: _this.$refs.ipt2.value
        })
      }).then(function(res) {
        console.log(res.data);
        let uid=res.data.info.user.uid;
        let token = res.data.info.token;
        _this.$store.commit("token", token);
        _this.$store.commit("uid", uid);
        _this.$router.push('/home')
      });
    }
  }
};
</script>

<style scoped>
body {
  width: 100%;
}
.box {
  width: 100%;
  overflow: hidden;
 padding: 170px 20px 0 20px;
  box-sizing: border-box;
}
.box p {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40px;
}
.box p .btn {
  border: none;
}
.box .btn-l {
  margin: 40px 0 0 0;
  font-size: 20px;
}
.box .tes {
  text-align: center;
  margin-top: 30px;
}
.box p .btn {
  border: none;
  font-size: 24px;
}
</style>
